<template>
  <div>
    <!-- 展示订单详情的结构 -->
    <el-card class="box-card">
      <!-- 卡片头部结构-->
      <template #header>
        <div class="detail">挂号详情</div>
      </template>
      <!-- 身体部分-顶部结构 -->
      <div class="top">
        <!-- 左侧标签 -->
        <el-tag type="success" class="ml-2">
          <div class="tag">
            <svg t="1739771374542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4247" width="16" height="16">
              <path
                d="M414.245926 751.028148l437.57037-453.12c7.300741-7.49037 7.111111-19.531852-0.474074-26.832593-7.49037-7.300741-19.531852-7.111111-26.832593 0.474074L398.506667 712.722963 199.111111 513.327407c-7.395556-7.395556-19.437037-7.395556-26.832593 0l0 0c-7.395556 7.395556-7.395556 19.437037 0 26.832593l212.574815 212.574815c6.731852 6.731852 17.161481 7.300741 24.557037 1.896296C411.211852 753.682963 412.823704 752.545185 414.245926 751.028148z"
                fill="#1afa29" p-id="4248"></path>
            </svg>
            <span>{{ orderInfo.param?.orderStatusString }}</span>
          </div>
        </el-tag>
        <!-- 右侧二维码 -->
        <div class="right_info">
          <img src="../../../../assets/images/code_app.png" alt="">
          <div class="info">
            <p>微信关注”北京114预约挂号“</p>
            <p>“快速预约挂号”</p>
          </div>
        </div>
      </div>
      <!-- 身体部分-订单详情 -->
      <div class="bottom">
        <div class="left">
          <!-- 左侧展示订单详情信息 -->
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊人信息</div>
              </template>
              {{ orderInfo.patientName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊日期</div>
              </template>
              {{ orderInfo.reserveDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊医院</div>
              </template>
              {{ orderInfo.hosname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室</div>
              </template>
              {{ orderInfo.depname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生职称</div>
              </template>
              {{ orderInfo.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生服务费</div>
              </template>
              <span style="color: red;">{{ orderInfo.amount }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号单号</div>
              </template>
              {{ orderInfo.outTradeNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号时间</div>
              </template>
              {{ orderInfo.createTime }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="btn">
            <el-popconfirm title="确定取消预约吗?" v-if="orderInfo.orderStatus == 1 || orderInfo.orderStatus == 0"
              @confirm="cancel">
              <template #reference>
                <el-button>取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" size="default" v-if="orderInfo.orderStatus == 0"
              @click="openDialog">支付</el-button>
          </div>
        </div>
        <div class="right">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>注意事项</span>
              </div>
            </template>
            <p>1.请确认就诊人信息是否正确,若填写错误将无法取号急诊,损失由本人承担;</p>
            <p style="color: red;">2.[取号] 就诊当天需在{{ orderInfo.fetchTime }}前在医院取号,未取号视为爽约,该号不退不换;</p>
            <p>3.[退号] 在{{ orderInfo.quitTime }}前可在线退号,逾期将不可办理退号退费;</p>
            <p>4.北京114预约挂号支持自费患者使用身份证预约,同时支持北京市医保患者使用北京社保卡在平台预约挂号.请于就诊当日,携带预约挂号所使用的有效身份证件到院取号;</p>
            <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号.</p>
          </el-card>
        </div>
      </div>
    </el-card>
    <!-- 展示支付二维码的结构 -->
    <el-dialog v-model="dialogVisible" title="微信支付" width="400px" @close="closeDialog">
      <!-- 支付需要使用的二维码图片 -->
      <div class="qrcode">
        <img :src="imgUrl" alt="">
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <!-- 对话框底部插槽传递结构 -->
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Detail">
//引入组合式API
import { onMounted, ref } from 'vue'
//引入获取订单详情的API和ts类型
//@ts-ignore
import { reqOrderInfo, reqCancelOrder, reqQrcode, reqQueryPayState } from "@/api/user"
//@ts-ignore
import type { OrderInfoResponseData, OrderInfo, QrCode, PayResult } from '@/api/user/type'
//引入路由
import { useRoute } from 'vue-router'
//引入处理错误的ElMessage
import { ElMessage } from 'element-plus'
//引入生成二维码的插件
//@ts-ignore
import QRCode from 'qrcode'

//路由
let $route = useRoute()
//订单详情数据
let orderInfo = ref<OrderInfo>({} as OrderInfo)
//对话框显示和隐藏的响应式数据
let dialogVisible = ref<boolean>(false)
//支付二维码图片的url
let imgUrl = ref<string>('')
//定时器
let timer = ref<any>()

//发送请求获取订单详情数据
const getOrderInfo = async () => {
  let result: OrderInfoResponseData = await reqOrderInfo($route.query.orderId as string)
  if (result.code == 200) {
    orderInfo.value = result.data
  }
}
//组件挂载完毕：发送请求获取订单详情数据
onMounted(() => {
  getOrderInfo()
})
//点击气泡框确认按钮的回调：取消订单，重新发送请求获取订单详情数据
//订单状态orderStatus有三种:-1 取消预约 0 预约成功未支付 1预约且支付成功
const cancel = async () => {
  try {
    //取消预约成功
    await reqCancelOrder($route.query.orderId as string)
    //再次发送请求,获取数据
    getOrderInfo()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '取消预约失败'
    })
  }
}
//点击关闭窗口的回调
const closeDialog = () => {
  //关闭对话框
  dialogVisible.value = false
  //清除定时器
  clearInterval(timer.value)
}
//点击支付按钮的回调
const openDialog = async () => {
  //打开对话框
  dialogVisible.value = true
  //发送请求，获取二维码信息
  let result: QrCode = await reqQrcode($route.query.orderId as string)
  //根据服务器返回的二维码信息生成二维码图片
  imgUrl.value = await QRCode.toDataURL(result.data.codeUrl)
  //询问当前这笔交易的支付结果（长轮询）
  timer.value = setInterval(async () => {
    let result: PayResult = await reqQueryPayState($route.query.orderId as string)
    if (result.data) {
      //关闭对话框
      dialogVisible.value = false
      //提示信息
      ElMessage({
        type: 'success',
        message: '支付成功'
      })
      //清除定时器
      clearInterval(timer.value)
      //再次发送请求，获得订单详情数据
      getOrderInfo()
    }
  })
}
</script>

<style scoped lang="scss">
.box-card {
  .detail {
    color: #7f7f7f;
    font-weight: 900;
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px;

    .tag {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }

    .right_info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
      }

      .info {
        margin-left: 10px;

        p {
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20px;

    .left {
      flex: 4;

      .btn {
        margin: 10px 0;
      }
    }

    .right {
      margin-left: 20px;
      flex: 6;

      p {
        line-height: 30px;
      }
    }
  }

}

.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    line-height: 30px;
  }
}

:deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}
</style>